iT邦幫忙

0

[Cmoney 菁英軟體工程師戰鬥營] IOS APP 菜鳥開發筆記(6)----關於標記叢集(Cluster Item)

ios
  • 分享至 

  • xImage
  •  

前言

這週想在地圖頁面中加入Cluster Item的功能,如果不知道這是什麼,請右轉參考法蘭克寫的這篇文章

導入GoogleMapsUtils失敗

原本以為照著文章做一切都會很順利,沒想到光是在 import GoogleMapsUtils 的部分就卡了快半天!
以往改完Podfile文件後,再從終端機輸入 pod install 和 pod update 便能導入套件,不知道為什麼偏偏在導入GoogleMapsUtils時一直報錯。一度以為是版本不相容的問題,還將最低支援向上調到ios 13,但還是解決不了問題.........

後來實在沒辦法跑去詢問了學長,才發現只要在Podfile中的target上方加入 use_frameworks! 這一行,就能順利解決問題了,開始進行專案才發現許多惱人的bug真的都是經驗不足才會踩坑呢。

以下是我實作Cluster Item的code,在初始化marker的部分是從server那取得資料,所以跟文章示範的不太依樣
,想看原版的可以點上方連結。

var clusterManager : GMUClusterManager! //叢集管理器

override func viewDidLoad() {
        super.viewDidLoad()
        
        / 生成 Cluster Manager 用來管理地圖上的 Cluster Item       
        //提供應用程序邏輯,以提取要在不同縮放級別使用的群集圖標。
        let iconGenerator = GMUDefaultClusterIconGenerator()

        
        //指定一種算法,該算法確定標記如何聚集,例如要包括在同一聚類中的標記之間的距離。
        let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
        
        //提供用於處理地圖上群集圖標的實際呈現的應用程序邏輯。
        let renderer = GMUDefaultClusterRenderer(mapView: self.mapView, clusterIconGenerator: iconGenerator)
        renderer.delegate = self
        
        self.clusterManager = GMUClusterManager(map: self.mapView, algorithm: algorithm, renderer: renderer)
        
        //在GMUClusterManager實例上設置地圖委託。
        self.clusterManager.setDelegate(self, mapDelegate: self)
            
//               初始化地圖上的 標記叢集
        self.initMapViewMarker()
}      

    private func initMapViewMarker() {
   
        ApiHelper.instance().getByArea(ping:50,range:2){
            [weak self] (isSuccess) in
            guard let weakSelf = self else {  //如果此 weakself 賦值失敗,就 return
                return
            }
            if (isSuccess){
                print("success")
                
                weakSelf.markerDataList.getMarkerDatas()
                    .map{ MyMarker(markerData: $0) }
                    .forEach {
                        let item = ClusterItem(markerData: $0.markerData)        
                        self?.clusterManager.add(item)
                        
                    }
                self?.clusterManager.cluster()
                return
            }else{
                print("failed")
                return
            }
        }
    }
    
extension MapViewController: GMUClusterRendererDelegate {
    
    /// 回傳一標記,此 delegate 可用來控制標記的生命週期。例如:設定標記的座標、圖片等等
    /// - Parameter renderer: _
    /// - Parameter object: _
    func renderer(_ renderer: GMUClusterRenderer, markerFor object: Any) -> GMSMarker? {
        switch object {
        case let clusterItem as ClusterItem:
            let myMarker = MyMarker(markerData: clusterItem.markerData)
            
             myMarker.snippet = clusterItem.markerData.address
                
             myMarker.icon = UIImage(named: "marker_rainbow")

           
            return myMarker
        default:
            return nil
        }
    }
    
}

// MARK: - GMUClusterManagerDelegate
extension MapViewController: GMUClusterManagerDelegate {
    
    /// 點擊叢集所會觸發的事件
    /// - Parameter clusterManager: _
    /// - Parameter cluster: _
    func clusterManager(_ clusterManager: GMUClusterManager, didTap cluster: GMUCluster) -> Bool {
        print("按了叢集")
        return false
    }
    
    /// 點擊叢集項目所會觸發的事件
    /// - Parameter clusterManager: _
    /// - Parameter clusterItem: _
    func clusterManager(_ clusterManager: GMUClusterManager, didTap clusterItem: GMUClusterItem) -> Bool {
        
        print("按了叢集項目")
        return false
    }
    
}       

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言